<template>
  <div class="login-box">
    <a-form
        id="components-form-demo-normal-login"
        :form="form"
        class="login-form"
        @submit="handleSubmit"
    >
      <a-form-item>
        <a-input
            v-decorator="[
          'username',
          { rules: [{ required: true, message: '请输入用户名' }] },
        ]"
            placeholder="请输入用户名"
        >
          <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-input
            v-decorator="[
          'password',
          { rules: [{ required: true, message: '请输入密码' }] },
        ]"
            type="password"
            placeholder="请输入密码"
        >
          <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-input
            v-decorator="[
          'code',
          { rules: [{ required: true, message: '请输入图形验证码' }] },
        ]"
            placeholder="请输入图形验证码"
        >
          <a-icon slot="prefix" type="code" style="color: rgba(0,0,0,.25)" />
          <img
              class="login-captcha"
              slot="suffix"
              :src="'/admin-api/auth/captcha'+'?'+rand"
              @click="rand=Math.random()"
              alt="">
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" html-type="submit" class="login-form-button">
         登录
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import {login} from '@/api'
export default {
  data(){
    return{
      rand: Math.random(),
    }
  },
  beforeCreate() {
    this.form = this.$form.createForm(this);
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields( async(err, values) => {
        if (!err) {
          const res = await login({
            username: values.username,
            password: values.password,
            code: values.code,
          })
          // console.log(values,'1',res)
          if(res.code ==='000000') {
            this.$message.success('登录成功')
            localStorage.setItem('token',res.value)
            this.$router.push('/')
          }
        } else {
          return false
        }
      });
    },
  },
};
</script>
<style scoped lang="less">
.login-box{
  width: 300px;
  margin: 200px;
  .login-captcha {
  height: 30px;
}
}
</style>
